<template>
  <div class="qtCategories">
    <qtHeader fatherTitle="资产类型" fatherCreate="创建新的" @tell='getName'></qtHeader>
    <el-row class="qtContent">
      <el-col :span="24">
        <el-table :data="tableData" stripe style="width: 100%" v-loading="loading" height="778px">
          <el-table-column prop="name" label="名称" width="120"></el-table-column>
          <el-table-column  label="图片" width="150">
            <template slot-scope="scope">
              <img :src="'http://www.it.com:80/api/'+scope.row.photo" alt="" class="qtImg">
            </template>
          </el-table-column>
          <el-table-column prop="status" label="类型" ></el-table-column>
          <el-table-column prop="assets" label="资产" >
            <template slot-scope="scope" >
              <span v-if="scope.row.status === '资产' && scope.row.total">{{scope.row.total}}</span>
              <span v-else>0</span>
            </template>
          </el-table-column>
          <el-table-column prop="hardware" label="硬件" >
             <template slot-scope="scope">
              <span v-if="scope.row.status === '硬件' && scope.row.total">{{scope.row.total}}</span>
              <span v-else>0</span>
             </template>
          </el-table-column>
          <el-table-column prop="peripheral" label="外设" >
             <template slot-scope="scope">
              <span v-if="scope.row.status === '外设' && scope.row.total">{{scope.row.total}}</span>
              <span v-else>0</span>
             </template>
          </el-table-column>
          <el-table-column prop="consumables" label="耗材" >
             <template slot-scope="scope">
              <span v-if="scope.row.status === '耗材' && scope.row.total">{{scope.row.total}}</span>
              <span v-else>0</span>
             </template>
          </el-table-column>
          <el-table-column prop="licence" label="许可证" >
             <template slot-scope="scope">
              <span v-if="scope.row.status === '许可证' && scope.row.total">{{scope.row.total}}</span>
              <span v-else>0</span>
             </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" circle @click="handleEdit(scope.row)"
              :title="scope.row.total > 0 ? '已被关联,禁止修改':''" :disabled="scope.row.total > 0 ? true: false">
                <i class="el-icon-edit" ></i>
              </el-button>
              <el-button size="mini" type="danger" circle @click="handleDelete(scope.row)" :title="scope.row.total > 0 ? '已被关联,禁止删除':''"
              :disabled="scope.row.total > 0 ? true: false">
                <i class="el-icon-delete"></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
         <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage1"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-col>
    </el-row>
     <!-- 添加弹框 -->
    <el-dialog  :visible.sync="dialogFormVisible" width="800px"  center custom-class="dialogClass" @close="cancel">
      <el-form :model="form" ref="dataform">
         <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="资产类型" :label-width="formLabelWidth" prop="categoriesvalue">
          <el-select v-model="form.categoriesvalue" placeholder="请选择类型">
            <el-option v-for="item in categories" :key="item.name" :value="item.id" :label="item.status"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="资产图片" :label-width="formLabelWidth">
         <el-upload
          class="qtUpload"
          action="/api/setup/uploadFile.php"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="uploadFile"
          list-type="picture"
          :limit=1
          :on-success="handleSuccess"
          with-credentials
          ref="upload"
          >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import qtHeader from '../components/header'
import { getCategories, delCategories, getCategoriesStatus, addCategories, checkCategories } from '@/api/index.js'
export default {
  components: {
    qtHeader
  },
  data () {
    return {
      tableData: [],
      currentPage1: 1,
      total: 10,
      page: 1,
      pageSize: 10,
      loading: false,
      dialogFormVisible: false,
      formLabelWidth: '200px',
      uploadFile: [], // 图片上传
      uploadSuccess: '',
      form: {
        categoriesvalue: '',
        name: ''
      },
      categories: [], // 资产类型
      row: '',
      assetsId: ''
    }
  },
  created () {
    this.getCategories()
  },
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.getCategories()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.page = val
      this.getCategories()
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    },
    // 图片上传成功返回
    handleSuccess (response) {
      this.uploadSuccess = response.path
      // console.log(this.uploadSuccess)
    },
    // 获取资产类型
    getCategories () {
      this.loading = true
      getCategories({ page: this.page, pageSize: this.pageSize }).then(res => {
        // console.log(res.data.data)
        if (res.data.msg === 'success') {
          this.tableData = res.data.data
          this.total = Number(res.data.total.total)
          this.loading = false
        }
      })
    },
    getName (name) {
      this.dialogFormVisible = name
      getCategoriesStatus().then(res => {
        if (res.data.code === 200) {
          this.categories = res.data.data
        }
      })
    },
    // 按确定按钮
    confirm () {
      var obj = {
        categoriesvalue: this.form.categoriesvalue,
        name: this.form.name,
        uploadPath: this.uploadSuccess
      }
      // console.log(obj)
      if (this.assetsId) {
        obj.id = this.assetsId
        if (this.row.name !== this.form.name) {
          obj.name = this.form.name
        } else {
          obj.name = this.row.name
        }
        if (!isNaN(this.form.categoriesvalue)) {
          // console.log(this.form.manufacturers)
          obj.categoriesvalue = this.form.categoriesvalue
        } else {
          obj.categoriesvalue = this.row.categories_statusId
        }
        if (this.row.name !== this.uploadSuccess) {
          obj.uploadPath = this.uploadSuccess
        } else {
          obj.uploadPath = this.photo
        }
        checkCategories(obj).then(res => {
          if (res.data.code === 200) {
            this.$message.success(res.data.msg)
            this.getCategories()
          } else {
            this.$message.error(res.data.msg)
          }
        })
        // console.log(obj)
      } else {
        // 新建资产类型
        addCategories(obj).then(res => {
          if (res.data.code === 200) {
            this.$message.success(res.data.msg)
            this.getCategories()
          } else {
            this.$message.error(res.data.msg)
          }
        })
      }

      this.dialogFormVisible = false
    },
    // 删除资产类型
    handleDelete (row) {
      // console.log(row)
      // if (row.total > 0) {
      //   this.tips = '有关联'
      // }
      this.$confirm('是否删除资产?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delCategories(row.id).then(res => {
          if (res.data.code === 200) {
            this.$message.success(res.data.msg)
          } else {
            this.$message.error(res.data.msg)
          }
          // 判断当删除的数据为当前页中的最后一条数据，刷新页面的时候需要把当前页码数减1
          if (this.total / this.pageSize - parseInt(this.total / this.pageSize) <= 0.1) {
            this.page = this.page - 1
          }
          this.getCategories()
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    cancel () {
      this.assetsId = ''
      this.$refs.dataform.resetFields()
      for (var key in this.form) {
        this.form[key] = ''
      }
      this.dialogFormVisible = false
    },
    // 编辑资产类型
    handleEdit (row) {
      this.getName(name)
      this.row = row
      console.log(row)
      this.assetsId = row.id
      this.form.name = row.name
      this.form.categoriesvalue = row.status
      this.uploadSuccess = row.photo
    }
  }
}
</script>

<style lang="scss" scoped>
.qtCategories {
  padding: 10px;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.qtTitle {
  font-size: 25px;
  text-align: left;
  line-height: 1;
}
.qtButton {
  margin-top: 5px;
  text-align: right;
  padding-right: 20px;
  .qtCreateAsset {
    background-color: #3c8dbc;
    padding: 5px 10px;
    color: #fff;
    border-radius: 5px;
  }
}
.qtImg {
  display: block;
  width: 75px;
  height: 100%;
  // object-fit: cover;
}
.qtUpload {
  margin-left: 30px;
}
</style>
